import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, View, Image } from 'react-native';

export default App = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.box}>
      <Text style={styles.text}>Hello World!</Text>
      <Text style={styles.text}>Hello World!</Text>
      {/* <Image source={require('./public/images/ai.jpg')} /> */}
      <View style={styles.box2}>
        <View style={styles.item1}></View>
        <View style={styles.item2}></View>
        <View style={styles.item1}></View>
      </View>
      <View>
        <TextInput
          style={{height: 40,backgroundColor:'#fff'}}
          placeholder="Type here to translate!"
          onChangeText={text => setText(text)}
          defaultValue={text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    height:300,
    backgroundColor:'#ccc',
    paddingTop:30,
    flex:1,
  },
  box2: {
    flex:1,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between'
  },
  item1: {
    width:100,
    height:100,
    backgroundColor:'red',
    
  },
  item2: {
    height:100,
    backgroundColor:'#fff',
    flex:1
  },
  text: {
    color:'green',
    fontSize:30,
  }
});
